<template>
  <div>
    <!-- 头部 -->
    <header class="header">
      <i class="el-icon-shopping-cart-full"></i>
      <span class="cate">我的购物车</span> &nbsp; &nbsp; &nbsp;
      <span class="y"
        >温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span
      >
    </header>
    <hr />
    <!-- 表格 -->
    <table style="width: 1200px">
      <tr>
        <td>
          <input type="checkbox" v-model="check" @change="qx" />
          全选
        </td>
        <td></td>
        <td>商品名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>
          <input type="checkbox" v-model="item.check" />
        </td>
        <td>
          <img
            :src="`http://101.132.181.9/api/${item.productImg}`"
            alt=""
            class="cate_img"
          />
        </td>
        <td>{{ item.productName }}</td>
        <td>{{ item.price }}</td>
        <td>
          <el-input-number
            v-model="item.num"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </td>
        <td>{{ item.price * item.num }}</td>
        <td>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(item.productID)"
          ></el-button>
        </td>
      </tr>
    </table>
    <div class="last">
      <span class="shop" @click="$router.push('/home')">继续购物</span>
      &nbsp;&nbsp; <span class="ss1">共{{ num1 }}件商品</span>&nbsp;&nbsp;
      <span class="ss">已选择{{ num2 }}件</span>&nbsp;&nbsp;
      <span class="btn"
        ><el-button type="warning" @click="js()">去结算</el-button></span
      >&nbsp;&nbsp; <span class="hj">合计:{{ num3 }}</span> &nbsp;&nbsp;
    </div>
  </div>
</template>
<script>
import {mapMutations} from 'vuex'
import { catelist, delgwc } from "../../utils/api";
export default {
  data() {
    return {
      list: [],
      check: false,
      num: 1,
    };
  },

  mounted() {
    this.getlist();
  },
  methods: {
    ...mapMutations(['add']),
    async getlist() {
      var userid = localStorage.getItem("userid");
      var res = await catelist(userid);
      console.log("购物车", res);
      this.list = res.data.shoppingCartData;
    },

    // 全选
    qx() {
      this.list.forEach((item) => {
        item.check = this.check;
      });
    },
    //步进器
    handleChange(value) {
      console.log(value);
    },

    //  删除
  async  del(id) {
      // console.log("删除", id);
      var userid = localStorage.getItem('userid')
      var rid = id
      var res = await delgwc(userid,rid)
      console.log('删除',res);
      this.getlist();
    },

    //去结算
    js(){
     this.list.forEach(item=>{
       item.check == true
      this.add(item)
      this.$router.push('/confirmOrder')
     })
    }
  },

  computed: {
    num1() {
      var a = 0;
      this.list.forEach((item) => {
        a += item.num;
      });
      return a;
    },
    num2() {
      var a = 0;
      var arr = [];
      arr = this.list.filter((item) => {
        return item.check;
      });
      arr.forEach((item) => {
        a += item.num;
      });
      return a;
    },
    num3() {
      var a = 0;
      var arr = [];
      arr = this.list.filter((item) => {
        return item.check;
      });
      arr.forEach((item) => {
        a += item.num * item.price;
      });
      return a;
    },
  },
  //单选监听
  watch: {
    list: {
      handler(val) {
        var arr = [];
        arr = val.filter((item) => {
          return item.check;
        });
        if (arr.length == val.length) {
          this.check = true;
        } else {
          this.check = false;
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss">
.el-icon-shopping-cart-full {
  font-size: 30px;
  color: orange;
  font-weight: 700;
}
.cate {
  font-size: 40px;
  font-weight: 600;
}
.y {
  color: #ccc;
}
.header {
  height: 100px;
  line-height: 100px;
}
.cate_img {
  width: 100px;
  height: 100px;
}
.last {
  height: 100px;
  line-height: 100px;
}

.btn {
  float: right;
}
.hj {
  float: right;
}
.shop:hover {
  color: orange;
}
</style>